<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 dynamic equations using toggle</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script>
  MathJax = {
    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
    chtml: {
      displayAlign: 'left'
    },
    startup: {
      ready: function () {
        //
        //  Do the usual startup (which does a typeset)
        //
        MathJax.startup.defaultReady();
        //
        //  When that is all done, un-hide the page
        //
        MathJax.startup.promise.then(function () {
          document.getElementById("hidden").disabled = true;
        });
      }
    }
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

  <style>
    h1 {
      background: #CCCCCC;
      padding: .2em 1em;
      border-top: 3px solid #666666;
      border-bottom: 3px solid #999999;
    }

    #frame {
      margin-left: 2em;
    }
  </style>

  <style id="hidden">
    body {
      visibility: hidden;
    }
  </style>

</head>
<body>
<h1>Dynamic Equations in MathJax</h1>

<div id="frame">
<p>
Expand the following:
$$
\require{action}
\def\longest{x(x+1) + 1(x+1)}
\def\click{\rlap{\enclose{roundedbox}{\small\text{next step}}}\hphantom{\longest}}
\def\={\phantom{{}={}}}
(x+1)^2
\toggle
  {\begin{aligned}[t]& = \click\end{aligned}}
  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]&\=\click\end{aligned}}
  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\&\=\click\end{aligned}}
  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]&\=\click\end{aligned}}
  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]&\=\click\end{aligned}}
  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]& = x^2 + 2x + 1\end{aligned}}
\endtoggle
$$
</p>
</frame>

</body>
</html>